<template>
    <div id="limitTime">
        <div class="top">
            <div class="tit">实现flag的期限</div>
            <input type="text" placeholder="在下面选择一个" maxlength="10" v-model="limit">
        </div>

        <div class="tagList">
            <div :class="{'tagSelect':index==limitIndex}" class="tag" v-for="(item,index) of listData" :key="index" @click="selectItem(item,index)">{{item.label}}</div>
        </div>

        <div class="btn-wrapper">
            <div class="btn" @click="toGoal">如果做不到，怎么惩罚</div>
        </div>

        <van-popup v-model="show" position="bottom">
            <van-datetime-picker

                type="date"
                :min-date="minDate"
                @confirm="confirmTime"
                @cancel="show=false"
                />
        </van-popup>
    </div>
</template>
<script>
import { DatetimePicker,Toast } from 'vant';
export default {
    name:'limieTime',
    data() {
        return {
            show:false,
            limitIndex:-1,
            limitVal:'',//时间选择器的值
            minDate:new Date(),
            limit:'',
            listData:[
                {label:'一周内',val:7},
                {label:'二周内',val:14},
                {label:'一个月内',val:30},
                {label:'两个月内',val:60},
                {label:'半年内',val:178},
                {label:'一年内',val:366},
                {label:'其它时间',val:'a'}
 
            ]
        }
    },
    methods: {
        toGoal(){
            if(!this.limit){
                Toast('请先填写实现期限');
                return
            }
            this.$bus.$data.limit=this.limit;
            this.$router.push('Goal')
        },
        confirmTime(val){
            //时间选择器
            this.show=false
            this.limit=this.transDate(val)
        },
        transDate(date){
            const d = new Date(date);
            const resDate = d.getFullYear() + '-' + p((d.getMonth() + 1)) + '-' + p(d.getDate());
            // const resTime = p(d.getHours()) + ':' + p(d.getMinutes())
            // const resTime = p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());
            function p(s) {
                return s < 10 ? '0' + s : s
            }
            return resDate
        },
        getDateStr(AddDayCount) { 
            var dd = new Date();
            dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
            var y = dd.getFullYear(); 
            var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
            var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号，不足10补0
            return y+"-"+m+"-"+d; 
        },
        selectItem(item,index){
            this.limitIndex=index
            if(isNaN(item.val)){
                
                this.show=true;
                return
            }
            this.limit=this.getDateStr(item.val);
            
        }
    },
    mounted() {
    },
}
</script>
<style lang="scss" scoped>
    .top{
        padding:0 20px;
        font-size: 30px;
        line-height: 30px;
        text-align: left;
        .tit{
            padding:20px 0;
        }
        input{
            padding:10px 0;
            font-size: 30px;
            line-height: 30px;
            border:none;
            border-bottom: 4px solid #eee;
            width:100%;
        }
    }

    //选项
    .tagList{
        display: flex;
        flex-wrap: wrap;
        margin-top:20px;
        // justify-content: space-around;
        .tag{
            margin:10px 20px;
            border-radius: 10px;
            border:2px solid #eee;
            padding:10px 30px;
        }
        .tagSelect{
            color:#fff;
            background-color: #d23e3d
        }
    }

    .btn-wrapper{
        .btn{
            font-size: 40px;
            padding:20px 40px;
            color:#fff;
            width:450px;
            border-radius: 30px;
            margin:100px auto 0;
            background-color: #d23e3d
        }
    }
</style>